{% extends "dvaui/base.html" %}
{% load staticfiles %}
{% block page_content %}
<section class="content-header" style="padding-top:0px" xmlns="http://www.w3.org/1999/html">
<div class="row">
    <div class="box box-info">
        <div class="box-header">
            <h4>Details for <a href="/videos/{{ object.video_id }}">{{ object.video.name }}</a>
                {% if object.video.dataset %} file {{ object.name }} {% else %} at {{ object.frame_index }}
                <a href="/segments/by_index/{{ object.video_id }}/{{ object.segment_index }}"> in Segment {{ object.segment_index }} </a>
                {% endif %}
            </h4>
        </div>
    </div>
</div>
</section>
<section class="content">
<div class="row">
    <div class="col-lg-6">
        <div class="box box-primary">
        <div class="box-header with-borders text-center">
            {% if previous_frame %}<a href="/frames/{{ previous_frame.0.pk }}" class="btn btn-success pull-left"><i class="fa fa-backward "></i> Previous</a> {% endif %}

            <a href="/query_frame/{{ object.pk }}/" class="btn btn-info"><i class="fa fa-search"></i> Query using this frame</a>
            {% if next_frame %}<a href="/frames/{{ next_frame.0.pk }}" class="btn btn-success pull-right"><i class="fa fa-forward"></i> Next</a>{% endif %}
        </div>
        <div class="box-body">
            <img src="{{ url }}" style="width:100%" />
        </div>
        <div class="box-footer">
            <div class="text-center"><a href="/annotate_frame/{{ object.pk }}/" class="btn btn-warning"><i class="fa fa-edit"></i> Add & edit annotations for bouding box</a></div>
        </div>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="box box-primary">
            <div class="box-header"><h4> Annotations for entire frame / image</h4></div>
            <div class="box-body">
                {% if annotation_list %}
                <table class="table">
                <thead>
                <tr>
                        <th>Annotation</th>
                        <th>User</th>
                        <th>Metadata</th>
                </tr>
                </thead>
                <tbody>
                {% for d in annotation_list %}
                    {% if d.full_frame %}
                    <tr>
                        <td>{{ d.object_name }} </td>
                        <td>{{ d.user }} </td>
                        <td class="text-center"><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#{{ d.pk }}">view metadata</button></td>
                    </tr>
                    {% endif %}
                {% endfor %}
                </tbody>
                </table>
                {% endif %}
            </div>
            <div class="box-footer">
            </div>
        </div>
        <div class="box box-primary">
            <div class="box-header"><h4>Annotations for bounding boxes</h4></div>
            <div class="box-body">
                {% if annotation_list %}
                <table class="table">
                <thead>
                <tr>
                        <th>Annotation</th>
                        <th>User</th>
                        <th>x</th>
                        <th>y</th>
                        <th>w</th>
                        <th>h</th>
                        <th>metadata</th>
                </tr>
                </thead>
                <tbody>
                {% for d in annotation_list %}
                    {% if not d.full_frame %}
                    <tr>
                        <td>{{ d.object_name }} </td>
                        <td>{{ d.user }} </td>
                        <td>{{ d.x }} </td>
                        <td>{{ d.y }} </td>
                        <td>{{ d.w }} </td>
                        <td>{{ d.h }} </td>
                        <td class="text-center"><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#{{ d.pk }}">view metadata</button></td>
                    </tr>
                    {% endif %}
                {% endfor %}
                </tbody>
                </table>
                {% endif %}
                </div>
            </div>
            <div class="box box-primary">
            <div class="box-header"><h4>Detections</h4></div>
            <div class="box-body">
                <table class="table">
                <thead>
                <tr>
                        <th>object</th>
                        <th>confidence</th>
                        <th>x</th>
                        <th>y</th>
                        <th>w</th>
                        <th>h</th>
                </tr>
                </thead>
                <tbody>
                {% for d in detection_list %}
                    <tr>
                        <td>{{ d.object_name }} </td>
                        <td>{{ d.confidence|floatformat }} </td>
                        <td>{{ d.x }} </td>
                        <td>{{ d.y }} </td>
                        <td>{{ d.w }} </td>
                        <td>{{ d.h }} </td>
                    </tr>
                {% endfor %}
                </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="box box-primary">
        <div class="box-header">
            <h3>Detected objects:</h3>
        </div>
    </div>
    <div class="row">
    {% for d in detection_list %}
    <div class="col-sm-3">
    <div class="box box-primary">
        <div class="box-header">
            <h4>{{ d.object_name }}</h4>
        </div>
        <div class="box-body text-center">
            <div style="width: {{ d.w }}px; height: {{ d.h }}px; position: relative;overflow:hidden;margin: auto;">
                <img src="{{ url }}" id="image" style="position: absolute; top: -{{ d.y }}px; left: -{{ d.x }}px" />
            </div>
        </div>
        <div class="box-footer text-center">
            <h5>Confidence: {{ d.confidence|floatformat }}</h5>
            <a href="/query_detection/{{ d.pk }}/" class="btn btn-info"><i class="fa fa-search"></i> Query using this detection</a>
        </div>
    </div>
    </div>
    {% if forloop.counter|divisibleby:"4" or forloop.last %}
        </div> <div class="row">
    {% endif %}
    {% if  forloop.last %}
        </div>
    {% endif %}
    {% endfor %}
</div>
</section>
{% for k in annotation_list %}
 <div class="modal fade" id="{{ k.pk }}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Annotation : {{ k.object_name }}</h4>
      </div>
      <div class="modal-body">
        <h4 class="text-center">Text metadata</h4>
        <textarea rows="10" style="width:100%;">{{ k.text }}</textarea>
        <h4 class="text-center">JSON metadata</h4>
        <textarea rows="10" style="width:100%;">{{ k.metadata }}</textarea>
        {% if not k.full_frame %}
        <h4 class="text-center" style="margin-bottom:15px;margin-top:20px">Bounding box</h4>
        <div style="width: {{ k.w }}px; height: {{ k.h }}px; position: relative;overflow:hidden;margin: auto;">
          <img src="{{ url }}" id="image" style="position: absolute; top: -{{ k.y }}px; left: -{{ k.x }}px" />
        </div>
        {% endif %}
      </div>
      <div class="modal-footer">
       <button type="button" class="btn btn-danger pull-left" onclick="delete_annotation({{ k.pk }})" ><i class="fa fa-trash"></i> delete</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
{% endfor %}
{% endblock %}
{% block page_js%}
<script>
    $(document).ready(function() {
        InitializeTables();
    })
</script>
{% endblock %}
